<template>
  <panel :text='text'>
    <van-button size="mini" slot="right" round @click="toPlaylistCollection">查看更多</van-button>
    <swipe :width='width' :bounce='false'>
      <swipe-item v-for="(playlist, index) of playlists" :key="index">
        <card :image='playlist.picUrl'
              :title="playlist.name"
              :key="index"
              class="recommendCard"
              @click.native="toPlaylistDetail(playlist)"
        >
          <div slot="top">
            <i class="iconfont icon-icon--"/>
            <span>{{ playlist.playCount }}</span>
          </div>
        </card>
      </swipe-item>
    </swipe>
  </panel>
</template>
<script>
import Swipe from 'base/swipe/swipe'
import SwipeItem from 'base/swipe/swipe-item'
import Card from 'base/card'
import Panel from 'base/panel'
import PlayList from '@/entity/PlayList'
import { personalized } from 'api/personalized'
import { playlist } from 'api/top'
import { randomNum } from '@/utils'

const texts = ['发现好歌单', '人气歌单推荐', '懂你的精选歌单', '宝藏歌单,值得聆听', '你的歌单精选站']

export default {
  props: {
    name: { // 歌单分类名称
      type: String,
      default: 'recommend',
      required: true
    }
  },
  components: {
    Swipe,
    SwipeItem,
    Card,
    Panel
  },
  data() {
    return {
      playlists: []
    }
  },
  mounted() {
    this.getplayList()
  },
  computed: {
    width() {
      return window.screen.width * 0.3
    },
    text() {
      if (this.isRecommend) {
        return texts[randomNum(0, texts.length - 1)]
      }
      return this.name
    },
    isRecommend() {
      return this.name === 'recommend'
    }
  },
  methods: {
    getplayList() {
      let pormise
      if (this.isRecommend) {
        pormise = personalized()
      } else {
        pormise = playlist({
          cat: this.name
        })
      }
      pormise.then(res => {
        let { result } = res
        if (!result) result = res.playlists
        result.forEach(playlist => this.playlists.push(new PlayList(playlist)))
      })
    },
    toPlaylistCollection() {
      this.$router.push({
        name: 'playlistCollection'
      })
    },
    toPlaylistDetail(playlist) {
      this.$router.push({
        name: 'playlist',
        params: {
          id: playlist.id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.recommendCard{
  /deep/ .column-content{
    text-align: left;
  }
}
</style>
